<template>
	<view>
		<view class="servers">
			<view class="servers_top z-margin-lr-32" :style="'padding-top:' + safeTop" style="box-sizing: content-box;" @click="selectAddress">
				<image src="/static/index/blocation.png" class="location_img z-margin-r-16" mode="" />
				<view class="z-font-32">{{ address.name }}</view>
				<image src="/static/index/black-more.png" class="more"></image>
			</view>
			<!-- 搜索 -->
			<view class="search z-flex z-margin-t-24">
				<u-search :clearabled="false" bgColor="#F7F8FA" @search="onSearch" actionText="" @change="nameChange" background="transparent" placeholder="请输入服务者名" shape="round" v-model="value">
				</u-search>
				<view class="right-icon z-font-22 z-flex" @click="onSearch">搜索</view>
			</view>
			
			 <u-tabs v-if="cate.length > 1"
			        :list="cate"
					keyName="name"
			        lineWidth="20"
			        lineColor="#EDF1F4"
					@change="onChange"
			        :activeStyle="{
			            color: '#62CB81',
			            fontWeight: 'bold',
			        }"
			        :inactiveStyle="{
			            color: '#A4A9B7',
			            transform: 'scale(1)'
			        }"
			        itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;margin-top:12rpx;"
			    >
			    </u-tabs>
			
			<!-- <van-tabs wx:if="{{cate.length > 1}}" active="{{ active }}" line-width="0" title-active-color="#62CB81" title-inactive-color="#A4A9B7" bind:change="onChange">
				<van-tab wx:for="{{cate}}" wx:key="id" title="{{item.name}}"></van-tab>
			</van-tabs> -->
			
			<view class="servers_main">
				<scroll-view scroll-y class="skill_box z-padding-lr-32" :show-scrollbar="false" :enhanced="true" @scrolltolower="lowerthreshold">
					<block v-for="(item,index) in list" v-if="list">
						<skill :info="item" @skillTap="skillTap" @appoint="skillTap"></skill>
					</block>
					<!-- <van-empty description="暂无服务人员" wx:if="{{finish && list.length === 0}}" /> -->
					<u-empty v-if="finish && list.length === 0" mode="" icon="http://cdn.uviewui.com/uview/empty/list.png">
					</u-empty>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
import http from '../../utils/http';
import skill from "@/component/skill.vue"
export default {
	components:{
		skill
	},
	data() {
		return {
			address: uni.getStorageSync('address'),
			active: 0,
			cate: [{ id: '', name: '全部' }],
			list: [],
			skill_cate_id: '',
			finish: false,
			loading: false,
			page: 1,
			name: '',
			value:'',
			// #ifdef MP-WEIXIN
				safeTop:uni.getStorageSync('safeTop')
			// #endif
		};
	},
	onLoad() {
		this.getInfo()
		this.getList()
	},
	methods: {
		selectAddress(){
		    this.util.skip('/service/selectAddress/selectAddress?city='+this.address.city+'&name='+this.address.name)
		},
		nameChange(e) {
			console.log(e,'eeeeeeeee')
		    this.name = e
		},
		onSearch(){
		    if(this.value === '')  return this.util.toast('请输入搜索内容')
		    this.reload()
		},
		reload(){
		    this.list = [],
		    this.page = 1,
		    this.finish = false
		    this.getList()
		},
		getList(){
		    if(this.finish){
		      return
		    }
		    if(this.loading){
		      return
		    }
		   this.loading = true
		    http.get('skill/searchskill', {
		      city: this.address.city,
		      lat: this.address.lat,
		      lng: this.address.lng,
		      page: this.page,
		      skill_cate_id: this.skill_cate_id,
		      name: this.name
		    }).then(res => {
		      if(res.data.length === 0){
		        this.finish = true
		      }
		      let arr = this.list.concat(res.data)
		      this.list = arr
			  console.log(this.list,'?????')
		    }).finally(res => {
		      this.loading = false
		    })
		},
		getInfo(){
		    http.post('skillcate/getlist', '', true).then(res => {
		
		      let arr = this.cate.concat(res.data)
		      this.cate = arr
		    })
		},
		onChange(e){
		    this.skill_cate_id = e.id
			console.log(this.skill_cate_id,'00000.0.0.')
		    this.reload()
		},
		lowerthreshold(){
		    this.page = ++this.page
		    this.getList()
		},
		//跳转服务者详情
		skillTap(e){
		    this.util.skip('/service/skilldetail/skilldetail?skill_id='+e.id)
		},
	}
};
</script>

<style>
.servers {
	height: 100vh;
	/*  */
	/* #ifdef H5 */
	height: calc(100vh - 100rpx);
	/* #endif */
	display: flex;
	flex-direction: column;
	background-color: #EDF1F4;
}

.location_img {
	width: 24rpx;
	height: 24rpx;
}

.more {
	width: 24rpx;
	height: 24rpx;
}

.servers_top {
	display: flex;
	align-items: center;
	flex-shrink: 0;
}
.search_box {
	display: flex;
	align-items: center;
	background: #fff;
	width: 686rpx;
	height: 80rpx;
	box-sizing: border-box;
	flex-shrink: 0;
}
.search_img {
	width: 24rpx;
	height: 24rpx;
}

.search {
	width: 95vw;
	margin: 0 auto;
	box-sizing: border-box;
}
.van-cell__left-icon-wrap {
	margin-top: 8rpx;
}

.right-icon {
	color: #fff;
	background-color: #62cb81;
	border-radius: 40rpx;
	width: 90rpx;
	height: 58rpx;
}

.input_box {
	width: 90%;
	color: #999;
}
.scrollbox {
	width: 100vw;
	white-space: nowrap;
	height: 70rpx;
}
.tipsbox {
	display: flex;
	align-items: center;
}
.tipsitem {
	padding: 10rpx 20rpx;
	border-radius: 15rpx;
	font-size: 26rpx;
}
.active {
	font-size: 26rpx;
	padding: 10rpx 20rpx;
	border-radius: 15rpx;
	color: var(--maingreencolor);
}
.active:nth-child(n + 2) {
	margin-left: 40rpx;
}
.tipsitem:nth-child(n + 2) {
	margin-left: 40rpx;
}

.servers .van-tabs__scroll {
	background: transparent;
}

.servers_main {
	flex: 1;
	overflow: hidden;
}
.skill_box {
	height: 100%;
	box-sizing: border-box;
}
</style>
